<template>
  <div class="page">
    <m-header :title="CustomerService.customer_service" :canback="Boolean(1)"></m-header>
    <div class="body">
      <textarea :placeholder="CustomerService.enter_message" class="text" v-model="content"></textarea>
      <button type="button" class="btn-submit btn-origin" @click="confirm">{{today.done_}}</button>
    </div>
    <m-load ref="load"></m-load>
  </div>
</template>
<script>
import { Owner } from "@/server/server.js";
import { Load } from "@/assets/commonjs/utils.js";
import { mapGetters } from "vuex";
export default {
  data() {
    return {
      content: null,
      CustomerService: {},
      today: {},
    };
  },
  computed: {
    ...mapGetters(["lang"])
  },
  created () {
    this.Exchange = this.lang.CustomerService;
    this.today = this.lang.today;
  },
  methods: {
    confirm() {
      if(!this.content) {
        mui.toast(this.CustomerService.enter_message);
        return
      }
      Load.loadStart(this);
      Owner.message({ content: this.content }).then(res => {
        if (res.code == 1) {
          if (res.code == 1) {
            mui.toast(res.msg);
            setTimeout(() => {
              Load.loadEnd(this);
              this.$router.go(-1);
            }, 500);
          } else {
            Load.loadEnd(this);
          }
        } else {
          mui.toast(res.msg);
        }
      });
    }
  }
};
</script>
<style lang="less" scoped>
@import "~link-less";
.body {
  padding: @margin-primary;
  background-color: white;
  .text {
    width: 100%;
    height: 300px;
    padding: 15px;
    border: 1px solid #ccc;
  }
  .btn-submit {
    padding: 20px 0;
    margin: 30px auto;
    display: block;
    width: 80%;
    background: rgba(64, 110, 195, 1);
    border-radius: 10px;
    font-size: 32px;
  }
}
</style>